<template>
	<view class="container">
		<view class="top-box">
			<view class="top-add" @tap="doPublish">发表</view>
		</view>
		<view class="publish-box">
			<view class="publish-title" v-if="userInfo">
				<view class="publish-title-avatar">
					<image :src="userInfo.userAvatar"></image>
				</view>
				<view class="publish-title-name">{{userInfo.userCollegeName}}</view>
			</view>
			<view @tap="goTeacherMy" class="publish-title" v-else>
				<view class="publish-title-avatar">
					<image src="../../static/images/user_default.png"></image>
				</view>
				<view class="publish-title-name">您还未登录</view>
			</view>
			<view class="publish-input">
				<textarea v-model="formData.content" maxlength="100" auto-height placeholder="此刻的想法..." placeholder-class="my-placeholder"></textarea>
			</view>
			<view class="pic-list" v-show="isImage">
				<view @tap="picPreview(picIndex)" class="pic-item" v-for="(pic,picIndex) in uploadPicList" :key="picIndex">
					<image :src="pic"></image>
				</view>
				<view class="pic-item" @tap="selectMedia">
					<image src="../../static/images/publish.png"></image>
				</view>
			</view>
			<view class="video-cover" v-show="!isImage">
				<image :src="coverPicUrl" mode="aspectFit"></image>
				<image src="../../static/images/play.png" class="video-play-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { http, showToastMsg, domain } from '../../utils'
	
	export default {
		data() {
			return {
				domain: domain,
				url: domain + '/api/upload',
				uploadPicList: [],
				formData: {
					content: '',
					pictures: [],
					coverPicture: '',
					videoUrl: ''
				},
				coverPicUrl: '',
				userInfo: null,
				isImage: true
			}
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},

		methods: {
			
			goTeacherMy() {
				uni.redirectTo({
					url: '/pages/teacher_my/teacher_my'
				})
			},
			
			selectMedia() {
				const that = this
				uni.chooseMedia({
				  count: 6,
				  success(selectMediaRes) {
						console.log(selectMediaRes)
				    if (selectMediaRes.type == 'video') { // 如果上传的是视频
							
							that.isImage = false
							let coverTempPath = selectMediaRes.tempFiles[0].thumbTempFilePath // 封面临时路径
							let videoTempPath = selectMediaRes.tempFiles[0].tempFilePath // 视频临时路径
							
							// 上传视频封面
							uni.uploadFile({
								url: that.url,
								filePath: coverTempPath,
								name: 'file',
								formData: {fileType: 'images'},
								success: (uploadFileRes) => {
									const res = JSON.parse(uploadFileRes.data)
									that.coverPicUrl = that.domain + res.data.url
									that.formData.coverPicture = res.data.url
								},
								fail: (err) => {
									console.log(err)
								}
							})
							
							// 上传视频
							uni.uploadFile({
								url: that.url,
								filePath: videoTempPath,
								name: 'file',
								formData: {fileType: 'videos'},
								success: (uploadFileRes) => {
									const res = JSON.parse(uploadFileRes.data)
									that.formData.videoUrl = res.data.url
								},
								fail: (err) => {
									console.log(err)
								}
							})
							
						} else { // 如果上传的是图片
							
							that.isImage = true
							
							let tempFilePaths = selectMediaRes.tempFiles
							let totalLength = tempFilePaths.length + that.uploadPicList.length
							if (totalLength > 6) {
								return uni.showToast({
								    title: '最多只能上传6张图片',
								    icon: 'none'
								})
							}
							
							for (let i = 0; i < tempFilePaths.length; i++) {
								uni.uploadFile({
									url: that.url,
									filePath: tempFilePaths[i].tempFilePath,
									name: 'file',
									formData: {fileType: 'images'},
									success: (uploadFileRes) => {
										const res = JSON.parse(uploadFileRes.data)
										that.uploadPicList.push(that.domain + res.data.url)
										that.formData.pictures.push(res.data.url)
									},
									fail: (err) => {
										console.log(err)
									}
								})
							}
							
						}
				  }
				})
			},
			
			picPreview(i) {
				const that = this
				uni.previewImage({
					current: i,
					indicator: 'none',
					urls: that.uploadPicList
				})
			},

			doPublish() {
				const that = this
				if (that.formData.content.length <= 0) {
					return uni.showToast({
					    title: '请输入此刻的想法',
					    icon: 'none'
					})
				}
				if (that.isImage) {
					if (that.formData.pictures.length <= 0) {
						return uni.showToast({
						    title: '请至少上传一张图片',
						    icon: 'none'
						})
					}
				}
				
				http('/trends/create', that.formData, {loadingTitle: '努力发表中'}).then(res => {
					if (res.code == 20000) {
						uni.redirectTo({
							url: '/pages/teacher_index/teacher_index'
						})
					}
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		color: #333333;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top-box {
		width: 750rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		background-color: #45d6b7;
	}

	.top-add {
		width: 100rpx;
		height: 48rpx;
		background-color: #23cea4;
		border-radius: 24rpx;
		font-size: 26rpx;
		font-weight: 900;
		color: #ffffff;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.publish-box {
		width: 650rpx;
		background-color: #ffffff;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.publish-title {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.publish-title-name {
		font-size: 24rpx;
		color: #666666;
		margin-left: 20rpx;
	}

	.publish-title-avatar image {
		width: 68rpx;
		height: 68rpx;
		border-radius: 34rpx;
	}

	.publish-input {
		width: 100%;
		height: 160rpx;
		margin-top: 20rpx;
	}

	.publish-input textarea {
		font-size: 26rpx;
	}

	.my-placeholder {
		font-size: 26rpx;
		color: #666666;
	}

	.pic-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pic-item {
		width: 214rpx;
	}

	.pic-item image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	
	.video-cover {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.video-play-img {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
	}
</style>
